<!--
 * @Descripttion: (库位信息/fac_loc)
 * @Author: (admin)
 * @Date: (2025-04-20)
-->
<template>
	<div>
		<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
			<el-form-item label="所属仓库" prop="whseId">
				<!-- <el-input v-model="queryParams.whseId" placeholder="请输入仓库Id" /> -->
				<el-tree-select clearable v-model="queryParams.whseId" :data="options.whseTree" />
			</el-form-item>
			<el-form-item label="库位编码" prop="locCode">
				<el-input v-model="queryParams.locCode" placeholder="请输入库位编码" />
			</el-form-item>
			<el-form-item label="库位名称" prop="locName">
				<el-input v-model="queryParams.locName" placeholder="请输入库位名称" />
			</el-form-item>
			<el-form-item label="库位类型" prop="locType">
				<el-select clearable v-model="queryParams.locType" placeholder="请选择库位类型">
					<el-option v-for="item in options.loc_type" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue">
						<span class="fl">{{ item.dictLabel }}</span>
						<span class="fr" style="color: var(--el-text-color-secondary);">{{ item.dictValue }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="库位类别" prop="locCategory">
				<el-select clearable v-model="queryParams.locCategory" placeholder="请选择库位类别">
					<el-option v-for="item in options.loc_category" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue">
						<span class="fl">{{ item.dictLabel }}</span>
						<span class="fr" style="color: var(--el-text-color-secondary);">{{ item.dictValue }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="库位状态" prop="locStatus">
				<el-select clearable v-model="queryParams.locStatus" placeholder="请选择库位状态">
					<el-option v-for="item in options.loc_status" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue">
						<span class="fl">{{ item.dictLabel }}</span>
						<span class="fr" style="color: var(--el-text-color-secondary);">{{ item.dictValue }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
				<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具区域 -->
		<el-row :gutter="15" class="mb10">
			<el-col :span="1.5">
				<el-button type="primary" v-hasPermi="['fac:loc:add']" plain icon="plus" @click="handleAdd">
					{{ $t('btn.add') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" :disabled="single" v-hasPermi="['fac:loc:edit']" plain icon="edit"
					@click="handleUpdate">
					{{ $t('btn.edit') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" :disabled="multiple" v-hasPermi="['fac:loc:delete']" plain icon="delete"
					@click="handleDelete">
					{{ $t('btn.delete') }}
				</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
		</el-row>

		<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
			highlight-current-row @sort-change="sortChange" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" align="center" />
			<el-table-column prop="locId" label="库位主键" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('locId')" />
			<el-table-column prop="whseId" label="仓库Id" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('whseId')" />
			<el-table-column prop="whseInfo" label="所属仓库" width="150" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('whseInfo')" />
			<el-table-column prop="locCode" label="库位编码" width="120" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('locCode')" />
			<el-table-column prop="locName" label="库位名称" width="120" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('locName')" />
			<el-table-column prop="locType" label="库位类型" width="100" align="center" v-if="columns.showColumn('locType')">
				<template #default="scope">
					<dict-tag :options="options.loc_type" :value="scope.row.locType" />
				</template>
			</el-table-column>
			<el-table-column prop="locCategory" width="120" label="库位类别" align="center"
				v-if="columns.showColumn('locCategory')">
				<template #default="scope">
					<dict-tag :options="options.loc_category" :value="scope.row.locCategory" />
				</template>
			</el-table-column>
			<el-table-column prop="locStatus" width="100" label="库位状态" align="center" v-if="columns.showColumn('locStatus')">
				<template #default="scope">
					<dict-tag :options="options.loc_status" :value="scope.row.locStatus" />
				</template>
			</el-table-column>
			<el-table-column prop="isEmpty" width="100" label="是否空库位" align="center" v-if="columns.showColumn('isEmpty')">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.isEmpty == true">是</el-tag>
					<el-tag type="danger" v-else>否</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="hasTray" width="100" label="是否有托盘" align="center" v-if="columns.showColumn('hasTray')">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.hasTray == true">是</el-tag>
					<el-tag type="danger" v-else>否</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="allocCode" width="120" label="出库路线次序" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('allocCode')" />
			<el-table-column prop="putawayCode" width="120" label="入库路线次序" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('putawayCode')" />
			<el-table-column prop="popular" width="100" label="热度值" align="center" v-if="columns.showColumn('popular')" />
			<el-table-column prop="x" width="100" label="X" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('x')" />
			<el-table-column prop="y" width="100" label="Y" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('y')" />
			<el-table-column prop="z" width="100" label="Z" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('z')" />
			<el-table-column prop="agvAddress" width="100" label="Agv地址" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('agvAddress')" />
			<el-table-column prop="planCode" width="180" label="计划号" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('planCode')" />
			<el-table-column prop="packageCode" width="120" label="包装编号" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('packageCode')" />
			<el-table-column label="修改记录" width="90" align="center" show-overflow-tooltip
				v-if="columns.showColumn('updateRecord')">
				<template #default="scope">
					<modifyRecord :data="scope.row" />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" min-width="150" fixed="right">
				<template #default="scope">
					<el-button-group>
						<el-button text v-hasPermi="['fac:loc:edit']" type="success" icon="edit" @click="handleUpdate(scope.row)">
							{{ $t('btn.edit') }}
						</el-button>
						<el-button text v-hasPermi="['fac:loc:delete']" type="danger" icon="delete"
							@click="handleDelete(scope.row)">
							{{ $t('btn.delete') }}
						</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
			@pagination="getList" />


		<el-dialog draggable :close-on-click-modal="false" :title="title" :lock-scroll="false" v-model="open">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
				<el-row :gutter="20">
					<!-- <el-col :lg="12">
						<el-form-item label="库位主键" prop="locId">
							<el-input v-model="form.locId" placeholder="请输入库位主键" :disabled="opertype != 1" />
						</el-form-item>
					</el-col> -->
					<el-col :lg="12">
						<el-form-item label="所属仓库" prop="whseId">
							<el-tree-select clearable v-model="form.whseId" :data="options.whseTree" style="width: 100%" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="库位编码" prop="locCode">
							<el-input v-model="form.locCode" placeholder="请输入库位编码" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="库位名称" prop="locName">
							<el-input v-model="form.locName" placeholder="请输入库位名称" />
						</el-form-item>
					</el-col>
					<el-col :lg="12"> </el-col>
					<el-col :lg="12">
						<el-form-item label="库位类型" prop="locType">
							<el-select v-model="form.locType" placeholder="请选择库位类型" style="width:100%;">
								<el-option v-for="item in options.loc_type" :key="item.dictValue" :label="item.dictLabel"
									:value="item.dictValue"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="库位类别" prop="locCategory">
							<el-select v-model="form.locCategory" placeholder="请选择库位类别" style="width:100%;">
								<el-option v-for="item in options.loc_category" :key="item.dictValue" :label="item.dictLabel"
									:value="item.dictValue"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="库位状态" prop="locStatus">
							<el-select v-model="form.locStatus" placeholder="请选择库位状态" style="width:100%;">
								<el-option v-for="item in options.loc_status" :key="item.dictValue" :label="item.dictLabel"
									:value="item.dictValue"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :lg="6">
						<el-form-item label="是否空库位" prop="isEmpty">
							<el-switch v-model="form.isEmpty" />
						</el-form-item>
					</el-col>
					<el-col :lg="6">
						<el-form-item label="是否有托盘" prop="hasTray">
							<el-switch v-model="form.hasTray" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="出库路线次序" prop="allocCode">
							<el-input v-model="form.allocCode" placeholder="请输入出库路线次序" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="入库路线次序" prop="putawayCode">
							<el-input v-model="form.putawayCode" placeholder="请输入入库路线次序" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="热度值" prop="popular">
							<el-input-number v-model="form.popular" :min="0" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :lg="8">
						<el-form-item label="X" prop="x">
							<el-input v-model="form.x" placeholder="请输入X" />
						</el-form-item>
					</el-col>
					<el-col :lg="8">
						<el-form-item label="Y" prop="y">
							<el-input v-model="form.y" placeholder="请输入Y" />
						</el-form-item>
					</el-col>
					<el-col :lg="8">
						<el-form-item label="Z" prop="z">
							<el-input v-model="form.z" placeholder="请输入Z" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="Agv地址" prop="agvAddress">
							<el-input v-model="form.agvAddress" placeholder="请输入Agv地址" />
						</el-form-item>
					</el-col>
					<el-col :lg="12"></el-col>
					<el-col :lg="12">
						<el-form-item label="计划号" prop="planCode">
							<el-input v-model="form.planCode" placeholder="请输入计划号" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="包装编号" prop="packageCode">
							<el-input v-model="form.packageCode" placeholder="请输入包装编号" />
						</el-form-item>
					</el-col>
					<el-col :lg="24">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer v-if="opertype != 3">
				<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
				<el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="facloc">
import modifyRecord from '@/components/MyTable/modifyRecord.vue';
import { treeFacWhse } from '@/api/facManage/facWhse.js'
import {
	pageFacLoc,
	addFacLoc, delFacLoc,
	updateFacLoc, getFacLoc,
}
	from '@/api/facManage/facLoc.js'
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
	pageNum: 1,
	pageSize: 10,
	sort: 'locCode',
	sortType: 'asc',
	whseId: undefined,
	locCode: undefined,
	locName: undefined,
	locType: undefined,
	locCategory: undefined,
	locStatus: undefined,
})
const columns = ref([
	{ visible: false, prop: 'locId', label: '库位主键', },
	{ visible: false, prop: 'whseId', label: '仓库Id', },
	{ visible: true, prop: 'whseInfo', label: '所属仓库', },
	{ visible: true, prop: 'locCode', label: '库位编码', },
	{ visible: true, prop: 'locName', label: '库位名称', },
	{ visible: true, prop: 'locType', label: '库位类型', },
	{ visible: true, prop: 'locCategory', label: '库位类别', },
	{ visible: true, prop: 'locStatus', label: '库位状态', },
	{ visible: true, prop: 'allocCode', label: '出库路线次序', },
	{ visible: true, prop: 'putawayCode', label: '入库路线次序', },
	{ visible: true, prop: 'popular', label: '热度值' },
	{ visible: true, prop: 'isEmpty', label: '是否空库位' },
	{ visible: true, prop: 'hasTray', label: '是否有托盘' },
	{ visible: true, prop: 'agvAddress', label: 'Agv地址', },
	{ visible: true, prop: 'planCode', label: '计划号', },
	{ visible: true, prop: 'packageCode', label: '包装编号', },
	{ visible: false, prop: 'x', label: 'X', },
	{ visible: false, prop: 'y', label: 'Y', },
	{ visible: false, prop: 'z', label: 'Z', },
	{ visible: true, prop: 'updateRecord', label: '修改记录', },
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])


var dictParams = [
	"loc_type",
	"loc_category",
	"loc_status",
]

proxy.getDicts(dictParams).then((response) => {
	response.data.forEach((element) => {
		state.options[element.dictType] = element.list
	})
})

function getList() {
	loading.value = true
	pageFacLoc(queryParams).then(res => {
		const { code, data } = res
		if (code == 200) {
			dataList.value = data.result
			total.value = data.totalNum
			loading.value = false
		}
	})
}

// 查询
function handleQuery() {
	queryParams.pageNum = 1
	getList()
}

// 重置查询操作
function resetQuery() {
	proxy.resetForm("queryRef")
	handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map((item) => item.locId);
	single.value = selection.length != 1
	multiple.value = !selection.length;
}
// 自定义排序
function sortChange(column) {
	var sort = undefined
	var sortType = undefined

	if (column.prop != null && column.order != null) {
		sort = column.prop
		sortType = column.order

	}
	queryParams.sort = sort
	queryParams.sortType = sortType
	handleQuery()
}

/*************** form操作 ***************/
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const state = reactive({
	single: true,
	multiple: true,
	form: {},
	rules: {
		locId: [{ required: true, message: "库位主键不能为空", trigger: "blur" }],
		whseId: [{ required: true, message: "所属不能为空", trigger: "change" }],
		locCode: [{ required: true, message: "库位编码不能为空", trigger: "blur" }],
		locName: [{ required: true, message: "库位名称不能为空", trigger: "blur" }],
		locType: [{ required: true, message: "库位类型不能为空", trigger: "change" }],
		locCategory: [{ required: true, message: "库位类别不能为空", trigger: "change" }],
		locStatus: [{ required: true, message: "库位状态不能为空", trigger: "change" }],
		isEmpty: [{ required: true, message: "是否空库位不能为空", trigger: "blur" }],
		hasTray: [{ required: true, message: "是否有托盘不能为空", trigger: "blur" }],
	},
	options: {
		// 库位类型 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
		loc_type: [],
		// 库位类别 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
		loc_category: [],
		// 库位状态 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
		loc_status: [],
		// 是否空库位 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
		isEmptyOptions: [],
		//库区信息
		whseTree: [],
	}
})

const { form, rules, options, single, multiple } = toRefs(state)

//获取库区信息
function getFacWhseTree() {
	treeFacWhse({ disabledFactory: true }).then(res => {
		const { code, data } = res
		if (code == 200) {
			state.options.whseTree = data
		}
	})
}

// 关闭dialog
function cancel() {
	open.value = false
	reset()
}

// 重置表单
function reset() {
	form.value = {
		locId: null,
		whseId: null,
		locCode: null,
		locName: null,
		locType: null,
		locCategory: null,
		locStatus: null,
		allocCode: null,
		putawayCode: null,
		popular: 0,
		isEmpty: true,
		hasTray: false,
		x: null,
		y: null,
		z: null,
		agvAddress: null,
		planCode: null,
		packageCode: null,
		createBy: null,
		createTime: null,
		updateBy: null,
		updateTime: null,
		remark: null,
	};
	proxy.resetForm("formRef")
}


// 添加按钮操作
function handleAdd() {
	reset();
	open.value = true
	title.value = '添加库位信息'
	opertype.value = 1
	form.value.locId = proxy.parseGuid();
}
// 修改按钮操作
function handleUpdate(row) {
	reset()
	const id = row.locId || ids.value
	getFacLoc(id).then((res) => {
		const { code, data } = res
		if (code == 200) {
			open.value = true
			title.value = '修改库位信息'
			opertype.value = 2

			form.value = {
				...data,
			}
		}
	})
}

// 添加&修改 表单提交
function submitForm() {
	proxy.$refs["formRef"].validate((valid) => {
		if (valid) {

			if (form.value.locId != undefined && opertype.value === 2) {
				updateFacLoc(form.value).then((res) => {
					proxy.$modal.msgSuccess("修改成功")
					open.value = false
					getList()
				})
			} else {
				addFacLoc(form.value).then((res) => {
					proxy.$modal.msgSuccess("新增成功")
					open.value = false
					getList()
				})
			}
		}
	})
}

// 删除按钮操作
function handleDelete(row) {
	const Ids = row.locId ? [row.locId] : undefined || ids.value
	proxy
		.$confirm('是否确认删除"' + Ids.length + '"条数据项？', "警告", {
			confirmButtonText: proxy.$t('common.ok'),
			cancelButtonText: proxy.$t('common.cancel'),
			type: "warning",
		})
		.then(function () {
			return delFacLoc(Ids)
		})
		.then(() => {
			getList()
			proxy.$modal.msgSuccess("删除成功")
		})
}


handleQuery()
getFacWhseTree()
</script>